<!DOCTYPE html>
<title>Test controls with zooming.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<style>
video {
    margin: 50px;
}
</style>
<video controls></video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    assert_true(video.controls);

    video.oncanplaythrough = t.step_func(function() {
        setTimeout(function() {
            document.documentElement.style.zoom = "150%";
            video.onplaying = t.step_func_done(function() {
                assert_false(video.paused);
            });

            // Find the play button and click the middle of its bounding box.
            var playCoords = elementCoordinates(enabledPlayButton(video));

            eventSender.mouseMoveTo(playCoords[0] * 1.5, playCoords[1] * 1.5);
            eventSender.mouseDown();
            eventSender.mouseUp();
        }, 50);
    });

    video.src = "content/test.ogv";
});
</script>
